// 潮汐漂流瓶官网 JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // 初始化视频背景
    initVideoBackground();
    
    // 隐藏加载动画
    const loading = document.getElementById('loading');
    setTimeout(() => {
        loading.classList.add('hidden');
    }, 1000);

    // 导航栏滚动效果和视频控制
    const navbar = document.getElementById('navbar');
    const video = document.getElementById('background-video');
    const videoContainer = document.querySelector('.video-background');
    let lastScrollY = window.scrollY;

    window.addEventListener('scroll', () => {
        const scrollY = window.scrollY;
        const windowHeight = window.innerHeight;
        
        // 导航栏效果
        if (scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
        
        // 滚动时隐藏/显示导航栏
        if (scrollY > lastScrollY && scrollY > 100) {
            navbar.style.transform = 'translateY(-100%)';
        } else {
            navbar.style.transform = 'translateY(0)';
        }
        
        // 视频背景控制 - 根据滚动位置智能控制
        if (video && videoContainer) {
            const scrollThreshold = windowHeight * 0.3; // 滚动超过30%视窗高度时开始控制
            
            if (scrollY > scrollThreshold) {
                // 滚动离开第一屏，逐渐隐藏并暂停视频
                const fadeOutRatio = Math.min((scrollY - scrollThreshold) / (windowHeight * 0.3), 1);
                const opacity = 1 - fadeOutRatio;
                
                videoContainer.style.opacity = opacity;
                
                // 当透明度降到0.3以下时暂停视频以节省资源
                if (opacity < 0.3 && !video.paused) {
                    video.pause();
                }
            } else {
                // 在第一屏范围内，保持视频正常显示和播放
                videoContainer.style.opacity = '1';
                if (video.paused && video.readyState >= 3) {
                    video.play().catch(e => console.log('视频播放失败:', e));
                }
            }
        }
        
        lastScrollY = scrollY;
    });

    // 移动端菜单切换
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    
    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            const icon = mobileMenuBtn.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.className = 'fas fa-bars text-xl';
            } else {
                icon.className = 'fas fa-times text-xl';
            }
        });
    }

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const offsetTop = target.offsetTop - 80; // 考虑导航栏高度
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
                
                // 关闭移动端菜单
                if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                    mobileMenuBtn.querySelector('i').className = 'fas fa-bars text-xl';
                }
            }
        });
    });

    // 功能卡片动画
    const featureCards = document.querySelectorAll('.feature-card');
    const observerOptions = {
        threshold: 0.2,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    featureCards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(card);
    });

    // 气泡效果增强
    createFloatingBubbles();
    
    // 统计和用户反馈
    trackUserInteraction();
});

// 初始化视频背景
function initVideoBackground() {
    const video = document.getElementById('background-video');
    const videoContainer = document.querySelector('.video-background');
    const waveBackground = document.querySelector('.wave-bg');
    
    if (!video) return;
    
    // 检测设备和网络状态
    const isMobile = Utils.isMobile();
    const networkType = Utils.getNetworkType();
    const isSlowNetwork = networkType === 'slow-2g' || networkType === '2g';
    
    // 移动设备或慢网络时禁用视频
    if (isMobile || isSlowNetwork) {
        console.log('移动设备或慢网络检测到，使用备用背景');
        showFallbackBackground();
        return;
    }
    
    // 设置视频事件监听器
    setupVideoEvents(video);
    
    // 优化视频加载
    optimizeVideoLoading(video);
    
    // 页面可见性变化时暂停/恢复视频
    handleVisibilityChange(video);
    
    // 网络状态变化监听
    handleNetworkChange(video);
    
    // 初始化动态遮罩
    initDynamicOverlay(video);
}

// 设置视频事件监听器
function setupVideoEvents(video) {
    // 视频准备好播放时
    video.addEventListener('canplaythrough', function() {
        console.log('视频已准备好流播放');
        video.classList.add('loaded');
    });
    
    // 视频开始播放
    video.addEventListener('play', function() {
        console.log('视频开始播放');
    });
    
    // 视频暂停
    video.addEventListener('pause', function() {
        console.log('视频暂停');
    });
    
    // 视频加载错误
    video.addEventListener('error', function(e) {
        console.error('视频加载失败:', e);
        showFallbackBackground();
    });
    
    // 视频缓冲不足
    video.addEventListener('waiting', function() {
        console.log('视频缓冲中...');
    });
    
    // 视频可以继续播放
    video.addEventListener('playing', function() {
        console.log('视频继续播放');
    });
    
    // 监听视频卡顿
    let stallTimeout;
    video.addEventListener('stalled', function() {
        console.warn('视频播放卡顿');
        // 如果卡顿超过5秒，切换到备用背景
        stallTimeout = setTimeout(() => {
            console.log('视频卡顿时间过长，切换到备用背景');
            showFallbackBackground();
        }, 5000);
    });
    
    video.addEventListener('progress', function() {
        if (stallTimeout) {
            clearTimeout(stallTimeout);
            stallTimeout = null;
        }
    });
}

// 优化视频加载
function optimizeVideoLoading(video) {
    // 预加载策略
    video.preload = 'metadata';
    
    // 设置视频质量优化属性
    if (video.play) {
        // 尝试播放视频
        const playPromise = video.play();
        
        if (playPromise !== undefined) {
            playPromise
                .then(() => {
                    console.log('视频自动播放成功');
                })
                .catch(error => {
                    console.warn('视频自动播放失败:', error);
                    // 某些浏览器可能阻止自动播放
                    // 可以显示播放按钮或使用备用背景
                });
        }
    }
    
    // 设置播放速率（可选，根据需要调整）
    video.playbackRate = 1.0;
    
    // 禁用右键菜单
    video.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    });
}

// 处理页面可见性变化
function handleVisibilityChange(video) {
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            // 页面隐藏时暂停视频以节省资源
            if (!video.paused) {
                video.pause();
                video.dataset.wasPlaying = 'true';
            }
        } else {
            // 页面显示时恢复视频播放
            if (video.dataset.wasPlaying === 'true') {
                video.play().catch(console.warn);
                delete video.dataset.wasPlaying;
            }
        }
    });
}

// 处理网络状态变化
function handleNetworkChange(video) {
    // 监听在线/离线状态
    window.addEventListener('online', function() {
        console.log('网络连接恢复');
        if (video.paused && !document.hidden) {
            video.play().catch(console.warn);
        }
    });
    
    window.addEventListener('offline', function() {
        console.log('网络连接断开');
        video.pause();
    });
    
    // 监听连接类型变化（如果支持）
    if ('connection' in navigator) {
        navigator.connection.addEventListener('change', function() {
            const networkType = Utils.getNetworkType();
            console.log('网络类型变化:', networkType);
            
            // 在慢网络下暂停视频
            if (networkType === 'slow-2g' || networkType === '2g') {
                video.pause();
                console.log('慢网络检测到，暂停视频播放');
            } else if (!video.paused && !document.hidden) {
                video.play().catch(console.warn);
            }
        });
    }
}

// 显示备用背景
function showFallbackBackground() {
    const videoContainer = document.querySelector('.video-background');
    const waveBackground = document.querySelector('.wave-bg');
    
    if (videoContainer) {
        videoContainer.style.display = 'none';
    }
    
    if (waveBackground) {
        waveBackground.style.display = 'block';
    }
    
    console.log('已切换到备用波浪背景');
}

// 创建浮动气泡
function createFloatingBubbles() {
    const bubbleContainer = document.body;
    
    function createBubble() {
        const bubble = document.createElement('div');
        bubble.className = 'bubble';
        
        // 随机大小和位置
        const size = Math.random() * 60 + 20; // 20-80px
        const left = Math.random() * 100; // 0-100%
        const duration = Math.random() * 10 + 15; // 15-25秒
        
        bubble.style.width = size + 'px';
        bubble.style.height = size + 'px';
        bubble.style.left = left + '%';
        bubble.style.animationDuration = duration + 's';
        bubble.style.animationDelay = Math.random() * 5 + 's';
        
        bubbleContainer.appendChild(bubble);
        
        // 动画结束后移除气泡
        setTimeout(() => {
            if (bubble.parentNode) {
                bubble.parentNode.removeChild(bubble);
            }
        }, (duration + 5) * 1000);
    }
    
    // 定期创建气泡
    setInterval(createBubble, 3000);
}

// 用户交互统计
function trackUserInteraction() {
    // 记录页面访问
    console.log('页面访问时间:', new Date().toISOString());
    
    // 监听按钮点击
    document.querySelectorAll('.btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const action = this.textContent.trim();
            console.log('用户点击按钮:', action);
            
            // 这里可以添加实际的统计代码
            // 例如：发送到Google Analytics或其他统计平台
        });
    });
    
    // 监听功能卡片点击
    document.querySelectorAll('.feature-card').forEach(card => {
        card.addEventListener('click', function() {
            const feature = this.querySelector('h3').textContent;
            console.log('用户查看功能:', feature);
        });
    });
}

// 错误处理
window.addEventListener('error', function(e) {
    console.error('页面错误:', e.error);
    // 这里可以添加错误上报逻辑
});

// 性能监控
window.addEventListener('load', function() {
    const loadTime = performance.now();
    console.log('页面加载时间:', loadTime.toFixed(2) + 'ms');
    
    // 检查关键资源是否加载成功
    const images = document.querySelectorAll('img');
    images.forEach(img => {
        if (!img.complete || img.naturalHeight === 0) {
            console.warn('图片加载失败:', img.src);
        }
    });
});

// 动态遮罩功能 - 根据视频内容自动调整遮罩强度
function initDynamicOverlay(video) {
    const overlay = document.querySelector('.video-overlay');
    if (!video || !overlay) return;
    
    // 创建用于分析视频帧的Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 160; // 降低分辨率以提高性能
    canvas.height = 90;
    
    let isAnalyzing = false;
    let lastBrightness = 0.5; // 初始亮度值
    
    // 分析视频帧亮度
    function analyzeVideoFrame() {
        if (video.paused || video.ended || isAnalyzing) return;
        
        isAnalyzing = true;
        
        try {
            // 将视频当前帧绘制到Canvas上
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            
            // 获取图像数据
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            
            // 计算平均亮度
            let totalBrightness = 0;
            const pixelCount = data.length / 4;
            
            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];
                // 使用感知亮度公式
                const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
                totalBrightness += brightness;
            }
            
            const avgBrightness = totalBrightness / pixelCount;
            
            // 平滑亮度变化，避免剧烈跳跃
            const smoothedBrightness = lastBrightness * 0.8 + avgBrightness * 0.2;
            lastBrightness = smoothedBrightness;
            
            // 根据亮度调整遮罩强度
            updateOverlayIntensity(smoothedBrightness);
            
        } catch (error) {
            console.warn('视频帧分析失败:', error);
        }
        
        isAnalyzing = false;
    }
    
    // 根据亮度更新遮罩强度
    function updateOverlayIntensity(brightness) {
        // 亮度范围：0（暗）到 1（亮）
        // 当视频较暗时，减少遮罩强度；当视频较亮时，增加遮罩强度
        
        // 基础透明度：0.05 到 0.35 之间变化
        const minOpacity = 0.05; // 最小遮罩强度（视频很亮时）
        const maxOpacity = 0.35; // 最大遮罩强度（视频很暗时）
        
        // 反向映射：亮度越高，遮罩透明度越高（遮罩越弱）
        const overlayOpacity = minOpacity + (1 - brightness) * (maxOpacity - minOpacity);
        
        // 应用新的遮罩强度
        const rgba1 = `rgba(30, 64, 175, ${overlayOpacity})`;
        const rgba2 = `rgba(59, 130, 246, ${overlayOpacity * 0.8})`;
        const rgba3 = `rgba(6, 182, 212, ${overlayOpacity})`;
        
        const newBackground = `linear-gradient(135deg, ${rgba1} 0%, ${rgba2} 50%, ${rgba3} 100%)`;
        overlay.style.background = newBackground;
        
        // 调试信息（开发时可用）
        // console.log(`亮度: ${brightness.toFixed(3)}, 遮罩强度: ${overlayOpacity.toFixed(3)}`);
    }
    
    // 启动分析循环
    function startAnalysis() {
        analyzeVideoFrame();
        // 每500ms分析一次，平衡性能和响应性
        setTimeout(startAnalysis, 500);
    }
    
    // 等待视频可以播放后开始分析
    if (video.readyState >= 2) {
        startAnalysis();
    } else {
        video.addEventListener('loadeddata', () => {
            setTimeout(startAnalysis, 1000); // 延迟1秒开始，确保视频稳定播放
        });
    }
    
    // 视频播放状态变化时的处理
    video.addEventListener('play', () => {
        setTimeout(startAnalysis, 500);
    });
    
    video.addEventListener('pause', () => {
        isAnalyzing = false;
    });
}

// 工具函数
const Utils = {
    // 节流函数
    throttle: function(func, limit) {
        let inThrottle;
        return function() {
            const args = arguments;
            const context = this;
            if (!inThrottle) {
                func.apply(context, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        }
    },
    
    // 防抖函数
    debounce: function(func, delay) {
        let timeoutId;
        return function() {
            const args = arguments;
            const context = this;
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(context, args), delay);
        }
    },
    
    // 检测设备类型
    isMobile: function() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    },
    
    // 检测网络状态
    getNetworkType: function() {
        const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
        return connection ? connection.effectiveType : 'unknown';
    }
};

// 导出工具函数供其他脚本使用
if (typeof module !== 'undefined' && module.exports) {
    module.exports = Utils;
}

// 页面卸载时的清理工作
window.addEventListener('beforeunload', function() {
    console.log('用户离开页面');
    // 清理定时器、事件监听器等
}); 